<template>
    <div class="app-container calendar-list-container">
        <!-- 查询条件 -->
        <div class="filter-container">
            <div class="filter-li">
                <label>客户来源</label>
                <el-select v-model="listQuery.source" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in dicArray['客户来源']" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>客户类型</label>
                <el-select v-model="listQuery.type" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in dicArray['客户类型']" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>客户性质</label>
                <el-select v-model="listQuery.category" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in dicArray['客户性质']" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>初步结果</label>
                <el-select v-model="listQuery.result" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in dicArray['初步结果']" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>合作方式</label>
                <el-select v-model="listQuery.cooperation" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in dicArray['合作方式']" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="filter-li">
                <label>客户姓名</label>
                <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="客户姓名" v-model="listQuery.name">
                </el-input>
            </div>
            <div class="filter-li">
                <label>客户手机</label>
                <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="客户手机" v-model="listQuery.mobile">
                </el-input>
            </div>
            <div class="filter-li">
                <label>客户地址</label>
                <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="客户地址" v-model="listQuery.address">
                </el-input>
            </div>
            <div class="filter-li">
                <label>客户单位</label>
                <el-input @keyup.enter.native="onFilter" style="width: 200px;" class="filter-item" placeholder="客户单位" v-model="listQuery.dept">
                </el-input>
            </div>

            <el-button class="filter-item" type="primary" v-waves icon="search" @click="onFilter">搜索</el-button>
            <el-button class="filter-item" type="success" v-waves icon="edit" @click="edit()">新增</el-button>
            <el-button class="filter-item" type="success" v-show="row" v-waves icon="edit" @click="viewBatch()">查看所有报价</el-button>
        </div>

        <!-- 列表 -->
        <el-table :data="list" v-loading="listLoading" element-loading-text="加载中，请稍后" border fit highlight-current-row style="width: 100%"
            @current-change="onRowSelect">

            <el-table-column type="index" width="30">
            </el-table-column>

            <el-table-column align="center" label="客户单位">
                <template scope="scope">
                    <span>{{ scope.row.dept }}</span>
                    <i v-if="hasFile(scope.row.files)" class="el-icon-document" title="有附件"></i>
                </template>
            </el-table-column>

            <el-table-column align="center" label="客户来源">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.source ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="客户类型">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.type ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="客户性质">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.category ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="初步结果">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.result ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="合作方式">
                <template scope="scope">
                    <span>{{ getDicText(scope.row.cooperation ) }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="created_username" label="创建人">
                    <template scope="scope">
                            <span>{{ scope.row.user.name }}</span>
                        </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="150">
                <template scope="scope">
                    <el-button v-if="scope.row.created_userid == userid " size="small" type="success" @click="edit(scope.row)">编辑 </el-button>
                    <el-button v-else="" size="small" type="success" @click="view(scope.row)">查看</el-button>
                    <el-button size="small" type="danger" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <div v-show="!listLoading" class="pagination-container">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]"
                :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 表单 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form ref="appForm" :rules="rules" class="small-space" :model="form" label-position="left" label-width="100px">
                <el-row>
                    <el-col>
                        <el-form-item label="客户单位" prop="dept">
                            <el-input :disabled="!canEdit" v-model="form.dept" placeholder="客户单位"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户来源" prop="source">
                            <el-select :disabled="!canEdit" v-model="form.source" placeholder="请选择">
                                <el-option v-for="item in dicArray['客户来源']" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户类型" prop="type">
                            <el-select :disabled="!canEdit" v-model="form.type" placeholder="请选择">
                                <el-option v-for="item in dicArray['客户类型']" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户性质" prop="category">
                            <el-select :disabled="!canEdit" v-model="form.category" placeholder="请选择">
                                <el-option v-for="item in dicArray['客户性质']" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="初步结果" prop="result">
                            <el-select :disabled="!canEdit" v-model="form.result" placeholder="请选择">
                                <el-option v-for="item in dicArray['初步结果']" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="合作方式" prop="cooperation">
                            <el-select :disabled="!canEdit" v-model="form.cooperation" placeholder="请选择">
                                <el-option v-for="item in dicArray['合作方式']" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="推送给" prop="userid">
                            <el-select :disabled="!canEdit" v-model="form.userid" placeholder="请选择">
                                <el-option v-for="item in users" :key="item.userid" :label="item.name" :value="item.userid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col>
                        <el-form-item label="初步需求" prop="remark">
                            <el-input :disabled="!canEdit" type="textarea" v-model="form.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col>
                        <el-form-item label="客户地址" prop="address">
                            <el-col :span="4">
                                <el-input :disabled="!canEdit" v-model="form.province" placeholder="省份"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-input :disabled="!canEdit" v-model="form.city" placeholder="城市"></el-input>
                            </el-col>
                            <el-col :span="16">
                                <el-input :disabled="!canEdit" v-model="form.address" placeholder="详细地址"></el-input>
                            </el-col>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col>
                        <el-form-item label="附件上传" prop="files">
                            <el-upload :disabled="!canEdit" ref="upload" class="upload-demo" :on-success="onSuccess" action="/api/file/uploadFile" :on-preview="handlePreview"
                                :on-remove="handleRemove" :file-list="files">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <!-- <div slot="tip" class="el-uploakd__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>

                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save" v-show="canEdit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import api from '@/api/customer'
    import productApi from '@/api/product'
    import batchApi from '@/api/batch'
    import roleApi from '@/api/role'
    import waves from '@/directive/waves/index.js' // 水波纹指令
    import { mapGetters, mapState } from 'vuex'
    import _ from 'lodash'
    import userApi from '@/api/user'

    export default {
        name: 'customer',
        directives: {
            waves
        },
        data() {
            return {
                list: null,
                total: null,
                listLoading: false,
                listQuery: {
                    page: 1,
                    limit: 20,
                    name: '',
                    source: '',
                    type: '',
                    category: '',
                    result: '',
                    cooperation: '',
                    address: '',
                    remark: '',
                    tel: '',
                    dept: '',
                },
                dialogTitle: '',
                dialogFormVisible: false,
                form: {
                    id: null,
                    name: '',
                    source: '',
                    type: '',
                    category: '',
                    result: '',
                    cooperation: '',
                    address: '',
                    remark: '',
                    tel: '',
                    remark: '',
                    province: '',
                    city: '',
                    qq: '',
                    files: '',
                    dept: '',
                    userid: null,
                },
                row: null, //当前选中行
                rules: {
                    dept: [{ required: true, message: '请输入客户单位', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
                    address: [{ required: true, message: '请输入客户地址', trigger: 'blur' }],
                    tel: [{ required: true, message: '请输入客户电话', trigger: 'blur' }],
                    source: [{ required: true, message: '请选择客户来源', trigger: 'blur' }],
                    type: [{ required: true, message: '请选择客户le行', trigger: 'blur' }],
                    category: [{ required: true, message: '请选择客户性质', trigger: 'blur' }],
                    result: [{ required: true, message: '请选择初步结果', trigger: 'blur' }],
                    cooperation: [{ required: true, message: '请选择合作方式', trigger: 'blur' }],
                    userid: [{ required: true, message: '不能为空', trigger: 'blur' }],
                },
                users: [],//用户列表
                files: [],
                mode: 3,
            }
        },
        computed: {
            ...mapGetters([
                'dicArray', 'dicObj'
            ]),
            selected() {
                return this.row != null && this.row.id != null
            },
            canEdit() {
                return this.mode != 3
            },
        },
        async created() {
            await this.$store.dispatch('loadDic')
            await this.getUsers()
            await this.getList()
        },
        methods: {
            async getList() {
                this.listLoading = true
                let where = {
                    address: {
                        $like: `%${this.listQuery.address}%`,
                    },
                    remark: {
                        $like: `%${this.listQuery.remark}%`
                    },
                }
                if (this.listQuery.dept) {
                    where.dept = {
                        $like: `%${this.listQuery.dept}%`
                    }
                }
                if (this.listQuery.source) {
                    where.source = this.listQuery.source
                }
                if (this.listQuery.type) {
                    where.type = this.listQuery.type
                }
                if (this.listQuery.category) {
                    where.category = this.listQuery.category
                }
                if (this.listQuery.result) {
                    where.result = this.listQuery.result
                }
                if (this.listQuery.cooperation) {
                    where.cooperation = this.listQuery.cooperation
                }
                let response = await api.index({
                    page: this.listQuery.page,
                    limit: this.listQuery.limit,
                    where,
                })
                this.listLoading = false
                this.list = response.data.rows
                this.total = response.data.count
            },
            onFilter() {
                this.listQuery.page = 1
                this.getList()
            },
            onRowSelect(val) {
                this.row = val
            },
            onSizeChange(val) {
                this.listQuery.limit = val
                this.getList()
            },
            onCurrentChange(val) {
                this.listQuery.page = val
                this.getList()
            },
            getDicText(guid) {
                return this.dicObj[guid] || ''
            },
            edit(row) {
                this.dialogFormVisible = true
                this.mode = 2
                if (row) {
                    this.dialogTitle = '编辑客户信息'
                    Object.assign(this.form, row)
                    this.files = this.form.files ? JSON.parse(this.form.files) : []
                } else {
                    this.dialogTitle = '新增客户信息'
                    this.files = []
                    Object.assign(this.form, {
                        id: null,
                        name: '',
                        source: null,
                        type: null,
                        category: null,
                        result: null,
                        cooperation: null,
                        address: '',
                        remark: '',
                        tel: '',
                        files: '',
                        dept: '',
                        userid: null,
                        province: null,
                        city: null,
                    });
                }
            },
            view(row) {
                this.dialogFormVisible = true
                this.mode = 3
                this.dialogTitle = '编辑客户信息'
                Object.assign(this.form, row)
                this.files = this.form.files ? JSON.parse(this.form.files) : []
            },
            save() {
                this.$refs.appForm.validate(async (valid) => {
                    if (!valid) {
                        return
                    }
                    //获取文件
                    let files = _.map(this.$refs.upload.fileList, function (item) { return { name: item.name, size: item.size, url: item.url, uuid: item.uuid } })
                    this.form.files = JSON.stringify(files)
                    let ret = await api.save(this.form)
                    if (!ret.success) {
                        return
                    }
                    this.$notify({
                        title: '成功',
                        message: '保存成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.dialogFormVisible = false
                    this.onFilter()
                });

            },
            remove(row) {
                this.$confirm('是否删除该数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let ret = await api.remove(row)
                    if (ret.success) {
                        this.onFilter()
                    }
                })
            },
            //获取用户信息
            async getUsers() {
                let ret = await userApi.findAll()
                this.users = ret.data
            },
            //查看报价
            viewBatch() {
                this.$router.push({ path: 'batch', query: { customer_id: this.row.id } })
            },
            //处理文件删除
            handleRemove(file, fileList) {
                this.files = fileList
            },
            //处理文件预览
            handlePreview(file) {
                window.open(file.url)
            },
            onSuccess(response, file, fileList) {
                Object.assign(file, response.data)
                this.files = fileList
            },
            hasFile(para) {
                if (!para) return false
                var obj = JSON.parse(para)
                return obj.length > 0
            }
        }
    }

</script>
<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    ul.batch {
        list-style: none;



        .batch-item {
            display: inline-block;
        }

        li {
            margin-top: 10px;
        }
    }

</style>
